<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Gestion de reclammation</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Collapsing Site Navigation with jQuery" />
        <meta name="keywords" content="jquery, navigation, menu, collapsing, accordion, sliding, image, css3"/>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
      
		<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 <script type="text/javascript">
  var idmes;
  $("#up").click(function(e) {
    $.ajax({
				type :"POST",
				url:"updaterec.php?id="+$x,

			success: function(html){
           $("#listser").html(html);
      
			}
			
        });
		
});
  
  function affiche2(x){
$("#listeman").hide(500);	
$("#form").show();
 idmes=x;
 

}
  
  function update(){
 $.ajax({
				type :"POST",
				url:"updaterec.php?id="+idmes+"&mes="+$("#mes").val(),
			success: function(html){
           $("#updaterec").html(html);
      alert("reclamation traitée avec succés");
			}
			
        });

}
  
  
  
	function affiche(){
		alert("x1");
		  $.ajax({
				type :"GET",
				url:"rechman.php?x="+document.getElementById("nom").value,
			
			success: function(html){
        
			alert("x");
           $("#rechman").html(html);
      
			}
			
			
        });
		
	}
		</script> 
		<script src="js/Liberation_Sans.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('span');
			Cufon.replace('li');
			Cufon.replace('h1');
			Cufon.replace('p');
		</script>
        
        <style>
			body{
				background:#000 url(images/back.jpg) no-repeat;
				margin:0;
				padding:0;
			}
			span.reference{
				font-family:Arial;
				text-transform:uppercase;
				position:fixed;
				right:95px;
				bottom:10px;
				font-size:11px;
				text-shadow:1px 1px 1px #000;
			}
			span.reference a{
				color:#aaa;
				text-decoration:none;
				margin-right:20px;
			}
			span.reference a:hover{
				color:#ddd;
			}
			.title{
				position:absolute;
				right:10px;
				top:10px;
				width:91px;
				height:600px;
				
			}
		</style>
    </head>

    <body>
<input type="hidden" id="id" value= <?php echo $_GET['id'] ?> />
<input type="hidden" id="mesid"/>
		<div class="title"></div>
        <div class="titre" ><br /><h19><a id="titre22">Interface Collaborateur</a></h19></div>
		<div id="cc_menu" class="cc_menu">
			<div class="cc_item" style="z-index:5;">
				
				<span class="cc_title">Reclamations</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_1" > <a id="afficheman">En attente de reponse</a></li>
						<li class="cc_content_2">Reclamation traitées</li>
					</ul>
				</div>
			</div>
			<div class="cc_item" style="z-index:4;">
			
				<span class="cc_title">Services</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_3">Tous les services</li>
				
					</ul>
				</div>
			</div>
			
			
			
			<div id="cc_content" class="cc_content">
				<span id="cc_back" class="cc_back">&lt;&lt; Go back</span>
				<div class="cc_content_1">
					<h1>Lister Des réclamation</h1>
<p id="listeman"></p>
	<span id="form">
    <p>Commentaire<br /><br /><input type="text" id="mes" />
    <input type="button" onclick="update()" value="Envoyer" id="up"/></p>
    </span>
	</div>
				<div class="cc_content_2">
                <h1>Lister Des réclamation traitee</h1>
                				<p id="rectret"> </p>
				</div>
				<div class="cc_content_3">
					<h1>Liste des Services</h1>

					<p id="listser"></p>
				</div>
				<div class="cc_content_4">
                	
				</div>
				<div class="cc_content_5">
					<h1>New York</h1>
					<p>It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
				</div>
				<div class="cc_content_6">
					<h1>Miami</h1>
					<p>It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
				</div>
				<div class="cc_content_7">
					<h1>Recherche de manager</h1>
<p> 
Nom du manager<input type="text" id="nom" /> 
</p>			
<p id="rechman"></p>	
</div>
				<div class="cc_content_8">
					<h1>Our Philosophy</h1>
					<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
				
                </div>
                
				<div class="cc_content_9">
					<h1>Bacardi Summer Party</h1>
					<p>I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth</p>
				</div>
				<div class="cc_content_10">
					<h1>Lonestyle Auction</h1>
					<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire</p>
				</div>
				<div class="cc_content_11">
					<h1>Recherche de service</h1>
<p> 
Nom du service<input type="text" id="noms" /> 
</p>			
<p id="rechserv"></p>	
				</div>
				<div class="cc_content_12">
					<h1>Get in touch</h1>
					<p>Winter collection</p>
				</div>
			</div>
		</div>
        
        <!-- The JavaScript -->
        <script type="text/javascript">
            $(function() {
				//all the menu items
				var $items 		= $('#cc_menu .cc_item');
				//number of menu items
				var cnt_items	= $items.length;
				//if menu is expanded then folded is true
				var folded		= false;
				//timeout to trigger the mouseenter event on the menu items
				var menu_time;
				/**
				bind the mouseenter, mouseleave to each item:
				- shows / hides image and submenu
				bind the click event to the list elements (submenu):
				- hides all items except the clicked one, 
				and shows the content for that item
				*/
				$items.unbind('mouseenter')
					  .bind('mouseenter',m_enter)
				      .unbind('mouseleave')
					  .bind('mouseleave',m_leave)
					  .find('.cc_submenu > ul > li')
					  .bind('click',function(){
					var $li_e = $(this);
						  //if the menu is already folded,
						  //just replace the content
					if(folded){
						hideContent();
						showContent($li_e.attr('class'));
					}	
					      else //fold and show the content
						fold($li_e);
				});
				
				/**
				mouseenter function for the items
				the timeout is used to prevent this event 
				to trigger if the user moves the mouse with 
				a considerable speed through the menu items
				*/
				function m_enter(){
					var $this 	= $(this);
					clearTimeout(menu_time);
					menu_time 	= setTimeout(function(){
					//img
					$this.find('img').stop().animate({'top':'0px'},400);
					//cc_submenu ul
					$this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
					},200);
				}
				
				//mouseleave function for the items
				function m_leave(){
					var $this = $(this);
					clearTimeout(menu_time);
					//img
					$this.find('img').stop().animate({'top':'-600px'},400);
					//cc_submenu ul
					$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
				}
				
				//back to menu button - unfolds the menu
				$('#cc_back').bind('click',unfold);
				
				/**
				hides all the menu items except the clicked one
				after that, the content is shown
				*/
				function fold($li_e){
					var $item		= $li_e.closest('.cc_item');
					
					var d = 100;
					var step = 0;
					$items.unbind('mouseenter mouseleave');
					$items.not($item).each(function(){
						var $item = $(this);
						$item.stop().animate({
							'marginLeft':'-140px'
						},d += 200,function(){
							++step;
							if(step == cnt_items-1){
								folded = true;
								showContent($li_e.attr('class'));
							}	
						});
					});
				}
				
				/**
				shows all the menu items 
				also hides any item's image / submenu 
				that might be displayed
				*/
				function unfold(){
					$('#cc_content').stop().animate({'left':'-700px'},600,function(){
						var d = 100;
						var step = 0;
					$items.each(function(){
							var $item = $(this);
							
							$item.find('img')
								 .stop()
								 .animate({'top':'-600px'},200)
								 .andSelf()
								 .find('.cc_submenu > ul')
								 .stop()
								 .animate({'height':'0px'},200);
								 
							$item.stop().animate({
							'marginLeft':'0px'
							},d += 200,function(){
								++step;
								if(step == cnt_items-1){
									folded = false;
									$items.unbind('mouseenter')
										  .bind('mouseenter',m_enter)
										  .unbind('mouseleave')
										  .bind('mouseleave',m_leave);
									
									hideContent();
								}		  
							});
						});
					});
				}
				
				//function to show the content
				function showContent(idx){

					$('#cc_content').stop().animate({'left':'140px'},200,function(){
						$(this).find('.'+idx).fadeIn();
						if (idx=="cc_content_1"){
						
						$("#form").hide();
						  $.ajax({
				type :"POST",
				url:"listreclam.php?id="+$("#id").val(),			
				success: function(html){
           		$("#listeman").html(html);
      
				}
 });
						}
						
						
						if (idx=="cc_content_3"){						
						  $.ajax({
				type :"POST",
				url:"litserv.php",
			
			success: function(html){
           $("#listser").html(html);
      
			}
			
        });
						}
										
						
					});
					
					if (idx=="cc_content_2"){						
						  $.ajax({
				type :"POST",
				url:"listreclam2.php?id="+$("#id").val(),
			
			success: function(html){
           $("#rectret").html(html);
      
			}
			
        });
						}
										
						
				
					
					
				}
				
				//function to hide the content
				function hideContent(){
					$('#cc_content').find('div').hide();
				}
            });
        </script>
    </body>
</html>